<template>
  <div class="contenter">
    <el-card class="box-card playBox">
      <div class="playBtn">

        <i
          v-if="palyStayus == 0"
          class="el-icon-video-play"
          @click="startAnimation(0, [])"
        />
        <i
          v-if="palyStayus == 1"
          class="el-icon-video-pause"
          @click="pauseAnimation()"
        />
        <i
          v-if="palyStayus == 2"
          class="el-icon-video-play"
          @click="resumeAnimation()"
        />
      </div>
      <div class="slider"><el-slider v-model="value" :show-tooltip="false" @change="onChange" /></div>
      <div class="speed">
        <span
          v-for="(item, index) in speedList"
          v-show="muiltipleIndex-1 == index"
          :key="item"
          @click="selectMultiple(muiltipleIndex)"
        >{{ item }}倍</span>
      </div>
    </el-card>
    <div id="container" style="width: 100%; height: 60vh" />

  </div>
</template>

<script>
// 绘制线路需要的坐标
import { lazyAMapApiLoaderInstance } from 'vue-amap'
let TIME_VARIABLE
export default {
  props: {
    lineArr: {
      type: Array,
      default() {
        return []
      }
    },
    center: {
      type: Array,
      default() {
        return [116.478935, 39.997761]
      }
    }
  },
  // props: ['dialogVisible', 'form', 'dialogTitle'],
  data() {
    return {
      zoom: 17,
      markerArr: [],
      palyStayus: 0, // 0->未开始  1->行驶中  2->暂停
      value: 0, // 进度条初始化
      speedList: [1, 2, 3, 4, 5], // 倍数数据
      markerSpeed: 100, // 初始化速度
      marker: null, // 标记点
      passedPolyline: null,
      positionIndex: [], // 轨迹起始点--车辆所在的位置
      speedCount: 1, // 目前选择的倍数
      passedPath: 0, // 存放（播放时点击倍数）抓取到的位置
      int: null, // 定时器--进度条
      timeInt: null, // 定时器--时间
      curreGDPath: null, // 存放（播放时点击倍数）抓取到的经纬度
      polyline: null, // 轨迹线路
      map: null, // map地图
      standLineArr: [],
      muiltipleIndex: 1
    }
  },
  // 渲染前
  created: function() {
    this.lineArr_Data = this.lineArr
  },
  beforeDestroy: function() {
    document.onkeydown = function(e) {}
  },
  // 渲染后
  mounted() {
    lazyAMapApiLoaderInstance.load().then(() => {
      this.standLineArr = this.lineArr
      this.initMapTrackGpsIns()
    })
  },
  methods: {
    initMapTrackGpsIns() {
      // 操作dom渲染地图
      this.map = new AMap.Map('container', {
        resizeEnable: true,
        center: this.center,
        zoom: this.zoom
      })

      // 标记车辆
      this.marker = new AMap.Marker({
        position: this.center,
        icon: 'https://webapi.amap.com/images/car.png',
        offset: new AMap.Pixel(-26, -13),
        autoRotation: true,
        angle: -90,
        map: this.map
      })

      this.initPolyline()

      TIME_VARIABLE =
        (this.polyline.getLength() /
          1000 /
          (this.markerSpeed * this.speedCount)) *
        60 *
        60 // 行驶时间（s）

      this.marker.on('moving', (e) => {
        this.passedPolyline.setPath(e.passedPath)
      })

      this.map.setFitView()

      // 这里面的都是高德解析出更细致的经纬度点
      AMap.event.addListener(this.marker, 'moving', (e) => {
        // 这里是关键,车辆播放的时候，走的每一个点进行抓取（高德解析的更细致的点）以便更新倍数时及时的更新未走完的数据，后面会用到
        this.curreGDPath = new AMap.LngLat(
          e.passedPath[e.passedPath.length - 1].lng,
          e.passedPath[e.passedPath.length - 1].lat
        )
        // 行走到具体的第几个点
        this.passedPath = e.passedPath.length
      })
    },
    // 初始化回放路线
    initPolyline() {
      this.polyline = new AMap.Polyline({
        map: this.map,
        path: this.standLineArr,
        showDir: true,
        strokeColor: '#28F', // 线颜色
        strokeWeight: 6 // 线宽
      })
      this.passedPolyline = new AMap.Polyline({
        map: this.map,
        strokeColor: '#AF5', // 线颜色
        strokeWeight: 6 // 线宽
      })
    },

    startAnimation(status, arr) {
      // 速度 = 初始速度 * 倍数
      const markerSpeed = this.markerSpeed * this.speedCount

      if (status === 0) {
        this.value = 0 // 进度条归0
        this.palyStayus = 1 // icon状态为播放
        arr = this.standLineArr
        // 计时器--- 开始监听时间和进度条
        this.monitorInterval()
      }
      // 还是播放---请查看高德地图api
      this.marker.moveAlong(arr, markerSpeed)
    },

    pauseAnimation() {
      this.palyStayus = 2 // icon状态为2
      // 停止计时器
      clearInterval(this.int)
      clearInterval(this.timeInt)
      this.marker.pauseMove()
    },
    resumeAnimation() {
      this.palyStayus = 1 // icon状态为2
      this.monitorInterval()
      this.marker.resumeMove()
    },
    monitorInterval() {
      // 进度条
      this.int = setInterval(() => {
        this.value += 1 * this.speedCount
      }, (TIME_VARIABLE / 100) * 1000)
    },
    stopAnimation() {
      this.marker.stopMove()
    },
    selectMultiple(e) {
      const max = this.speedList[this.speedList.length - 1]
      const mun = max === e ? 1 : e + 1
      this.muiltipleIndex = mun
      this.speedCount = mun // 倍数
      // 如果正在行驶中点击倍数
      if (this.palyStayus === 1) {
        this.marker.pauseMove() // 先暂停车
        // 截取到车辆未走的经纬度数组
        this.standLineArr = this.standLineArr.slice(this.passedPath)

        this.standLineArr.unshift(this.curreGDPath)
        // 并把this.lineArr更新到线条里面，，要不线条颜色不同步
        this.initPolyline()
        // 刚才暂停了一下，就要再次开启播放
        this.startAnimation(1, this.standLineArr)
      }
    },
    onChange(e) {
      console.log(e)
    }
  }
}
</script>
<style lang="scss" scoped>
.map {
  width: 100%;
  height: 900px;
}
.contenter{
  position: relative;
  .playBox{
    position: absolute;
    bottom: 20px;
    left: 2.5%;
    height: 60px;
    width: 95%;
    background: #fff;
    z-index: 99;
    & >>> .el-card__body{
      display: flex;
      justify-content: center;
      justify-items: center;
    }
    .playBtn{
      float: left;
      width: 30px;
      font-size: 26px;

    }
    .slider{
      float: left;
      width: calc(100% - 120px);
      margin: -7px 20px 0;
    }
    .speed{
      float: right;
      width: 50px;
    }
  }
}
</style>
